<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="意见反馈"></xk-header>
		<view class="common-card" style="margin-top: 20rpx;">
			<ApptTimePicker ref="apptTimePicker" :value="formInfo.appointment_time" title="预约上门时间段"
				@change="timeChange">
				<view class="lr-view">
					<view>立即处理</view>
					<view class="right-view">
						<view v-if="formInfo.appointment_time">{{formInfo.appointment_time}}</view>
						<view v-else class="common-btn" style="margin: 0; padding: 0 22rpx;height: 50rpx; font-size: 24rpx;">预约处理</view>
						<image class="right-icon" src="@/static/jiantou.png"></image>
					</view>
				</view>
			</ApptTimePicker>
			<view v-if="firstTime" class="warning">最快将在{{formInfo.appointment_time || firstTime}}为您服务</view>
		</view>
		<view class="common-card">
			<view class="lr-view">
				<view>联系人</view>
				<!-- <view class="right-view">
					<image class="add-icon" src="@/static/add.png"></image>
					<view>新增联系人</view>
				</view> -->
			</view>
			<view class="contact-list">
				<view class="item">
					<image :src="(imgUrl+'/wx/chenggong.png')"></image>
					<view>{{formInfo.apply_user}}/{{formInfo.apply_phone}}</view>
				</view>
			</view>
		</view>
		<view class="common-card">
			<!-- <picker :range="assetsPropertyList" :value="assetsPropertyIndex === -1 ? 0 : assetsPropertyIndex" range-key="name"
				@change="propertyChange"> -->
				<view class="lr-view">
					<view>空间区域</view>
					<!-- <view class="right-view">
						<view>{{assetsPropertyList[assetsPropertyIndex].name}}</view>
						<image class="right-icon" src="@/static/jiantou.png"></image>
					</view> -->
				</view>
			<!-- </picker> -->
			<veiw>
			<textarea style="height: 130rpx;" class="gray-text-area" type="text" v-model="formInfo.fb_address" placeholder="在此输入具体位置，方便维修人员尽快找到位置。例: 三楼右侧楼梯口" placeholder-style="color:#ccc"/>
			</veiw>
		</view>
		<view class="common-card">
			<view class="types-list">
				<view v-for="(item, index) of types" @click="typeChange(item)" :key="index" :class="formInfo.fb_type == item.data_value ? 'item sel' : 'item dis'">
					{{item.data_text}}
				</view>
			</view>
			<view>
				<textarea type="text" v-model="formInfo.fb_desc" placeholder="请在此填写您需要反馈的问题，我们将尽快为您提供服务~" placeholder-style="color:#ccc"/>
			</view>

			<view class="list-item upload-img-item">
				<view>上传图片:</view>
				<upload-image @onChange="uploadImageChange()" :images='formInfo.fb_pic'/>
			</view>
		</view>

		<!-- <view class="list">
			<view class="list-item">
				<view>反馈人:</view>
				<input class="title1" v-model="formInfo.apply_user" disabled="true" placeholder="请输入报修人姓名" placeholder-style="color:#ccc"/>
			</view>
			<picker :range="types" :value="typeIndex === -1 ? 0 : typeIndex" range-key="data_text"
				@change="typeChange">
				<view class="list-item">
					<view>反馈类型:</view>
					<view :class="typeIndex !== -1 ? 'right-title1' : 'right-title1 right-title1-empty'">{{typeIndex !== -1 ? types[typeIndex].data_text : "请选择"}}</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
				</view>
			</picker>
			<view class="list-item desc-item">
				<view>问题描述:</view>
				<view>
					<textarea type="text" v-model="formInfo.fb_desc" placeholder="在此输入您的问题描述" placeholder-style="color:#ccc"/>
				</view>
			</view>

			<view class="list-item desc-item">
				<view>备注:</view>
				<view>
					<textarea type="text" v-model="formInfo.apply_remark" placeholder="在此输入您的备注内容" placeholder-style="color:#ccc"/>
				</view>
			</view>
		</view> -->
		<view class="common-bottom-view">
			<view class="common-btn" @click="onSubmit()">确认提交</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				eventName: "",
				isListIn: false,
				date: "",
				time: "",
				typeIndex: -1,
				types:[],
				formInfo: {
					apply_user: this.$util.getStorage("loginInfo").wx.name,
					apply_phone: this.$util.getStorage("loginInfo").wx.phoneNo,
					fb_type: "111",
					fb_address: "",
					fb_desc: "",
					fb_pic: "",
					apply_remark: "",
					isSubmit: true,
					appointment_time: '',
					property_id: '', //物业信息
				},
				notNull: {
					// fb_type: "请选择反馈类型",
					// fb_desc: "请输入问题描述"
				},
				timeInterval: null,
				assetsPropertyIndex: 0,
				assetsPropertyList: [],
				firstTime: '',
			};
		},
		onLoad(options){
			if (options && options.isListIn) {
				this.isListIn = options.isListIn
			}

			if (options && options.eventName) {
				this.eventName = options.eventName
			}

			if (options && options.data) {
				this.formInfo = JSON.parse(options.data)
			}
			// console.log('this.formInfo',this.formInfo);
			// console.log('this.$util.getStorage("loginInfo")',this.$util.getStorage("loginInfo"));
			this.feedBackType = JSON.parse(options.feedBackType || '[]')
			this.initInfo()
		},
		onShow(){
			this.firstTime = this.$refs.apptTimePicker.getFirstTime()
		},
		methods:{
			initInfo() {
				this.$api.baseData_getToolDataList({code:'PM_FEEDBACK_FBTYPE' + '_nostr'}).then(res => {
					console.warn("反馈类型：", res)
					this.types = res

					if (this.formInfo.fb_type) {
						for (let item of this.types) {
							if (item.data_value === this.formInfo.fb_type) {
								this.typeIndex = this.types.indexOf(item)
							}
						}
					}

				})
				this.$api.pmServiceRepair_getMyAssetsProperty().then(res=>{
					console.warn("物业列表：", res)
					for (let item of res) {
						item["name"] = item.building + "楼 " + item.storey +"层"
					}
					this.assetsPropertyList = res

					if (this.assetsPropertyList.length > 0)
						this.formInfo.property_id = this.assetsPropertyList[0].property_id;
				})
			},
			onTakePhoto() {
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera', 'album'], //从相册选择
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			},
			propertyChange(e) {
				this.assetsPropertyIndex = e.detail.value;
				this.formInfo.property_id = this.assetsPropertyList[this.assetsPropertyIndex].property_id;
			},
			timeChange(value){
				this.formInfo.appointment_time = value
			},
			typeChange(item) {
				// this.typeIndex = e.detail.value;
				console.log('item',item)
				this.formInfo.fb_type = item.data_value
			},
			uploadImageChange(images) {
				console.warn("图片列表：", images)
				this.formInfo.fb_pic = images
			},
			onSubmit() {
				for (let item in this.notNull) {
					if (!this.formInfo[item]) {
						this.$util.toast(this.notNull[item]);
						return;
					}
				}
				if(this.feedBackType.includes(this.formInfo.fb_type)){
					this.$util.toast('存在该类型未处理意见记录，无法再次新增')
					return
				}
				this.$util.confirm({
					content: "确认要提交反馈信息？",
					confirmText: "提交",
				}).then((isConfirm)=>{
					if (isConfirm) {
						this.$util.post({
							url: "wx/pmFeedback/apply",
							data: {
								...this.formInfo
							}
						}).then((res)=>{
							console.warn("反馈结果：", res);
							if (this.eventName) {
								this.$EventBus.$emit(this.eventName, res);
							}
							uni.redirectTo({
								url: "/pagesA/feedback/feedback-result?isListIn="+this.isListIn
							})
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.lr-view{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	color: #333333;
	.right-view{
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.add-icon{
		width: 32rpx;
		height: 32rpx;
		margin-right:15rpx;
	}
	.right-icon{
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}
}
.warning{
	font-size: 32rpx;
	color: #2C72FF;
	margin-top: 20rpx;
}
.contact-list{
	display: flex;
	flex-wrap: wrap;
	.item{
		display: flex;
		align-items: center;
		background: #F1F6FF;
		border: 1px solid #2C72FF;
		border-radius: 10rpx;
		padding: 25rpx 20rpx;
		font-size: 28rpx;
		color: #2C72FF;
		margin: 20rpx 20rpx 0 0;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
	}
}
.types-list{
	display: flex;
	flex-wrap: wrap;
	.dis{
		background: #F2F5FB;
		border: 1px solid #F2F5FB;
		color: #666666;
	}
	.sel{
		background: #F1F6FF;
		border: 1px solid #2C72FF;
		color: #2C72FF;
	}
	.item{
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		padding: 25rpx;
		font-size: 28rpx;
		margin: 0 20rpx 20rpx 0;
	}

}
.list-item {
	display: flex;
	flex-direction: row;
	align-items: center;

	color: #333;
	font-size: 28rpx;
	padding: 35rpx 20rpx;
	.add-img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}
	.del-img {
		width: 30rpx;
		height: 30rpx;
		// margin-right: -20rpx;
	}
}
.upload-img-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	.add-img-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #FFFFFF !important;
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;

		.add-img-view-item {
			margin-right: 5rpx;
			:first-child {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
}
// .list {
// 	margin: 20rpx 30rpx;
// 	background-color: #FFFFFF;
// 	border-radius: 10rpx;

// 	.content-title{
// 		font-size: 32rpx;
// 		color: #333333;
// 		font-weight: bold;
// 		display: flex;
// 		align-items: center;
// 		padding: 32rpx 0rpx;
// 		.title-icon{
// 			width: 12rpx;
// 			height: 40rpx;
// 			background-color: #2C72FF;
// 			border-top-right-radius: 8rpx;
// 			border-bottom-right-radius: 8rpx;
// 			margin-right: 10rpx;
// 		}
// 	}
// 	.list-item {
// 		display: flex;
// 		flex-direction: row;
// 		align-items: center;

// 		color: #333;
// 		font-size: 28rpx;
// 		padding: 35rpx 20rpx;

// 		.title1 {
// 			color: #333;
// 			margin-left: 20rpx;
// 		}

// 		.right-title1{
// 			flex: 1;
// 			text-align: right;
// 			color: #333;
// 		}
// 		.right-title1-empty {
// 			color: #ccc;
// 		}
// 		.jiantou {
// 			width: 14rpx;
// 			height: 24rpx;
// 			margin-left: 10rpx;
// 		}

// 		.add-img {
// 			width: 120rpx;
// 			height: 120rpx;
// 			margin-right: 20rpx;
// 		}
// 		.del-img {
// 			width: 30rpx;
// 			height: 30rpx;
// 			// margin-right: -20rpx;
// 		}
// 	}

// 	.desc-item {
// 		display: flex;
// 		flex-direction: column;
// 		align-items: flex-start;
// 		:last-child {
// 			margin-top: 20rpx;
// 			padding: 5rpx;
// 			width: 100%;
// 			height: 120rpx;
// 			background-color: #F9F9F9;

// 			>textarea {
// 				margin: 0rpx;
// 			}
// 		}
// 	}
// 	.upload-img-item {
// 		display: flex;
// 		flex-direction: column;
// 		align-items: flex-start;
// 		.add-img-view {
// 			display: flex;
// 			align-items: center;
// 			flex-direction: row;
// 			background-color: #FFFFFF !important;
// 			color: #999;
// 			font-size: 24rpx;
// 			margin-top: 20rpx;

// 			.add-img-view-item {
// 				margin-right: 5rpx;
// 				:first-child {
// 					width: 120rpx;
// 					height: 120rpx;
// 				}
// 			}
// 		}
// 	}
// 	.item-border {
// 		border-bottom: 1rpx #F8F8F8 solid;
// 	}
// }

</style>
